<!DOCTYPE html>
<html>

	<head>
		<meta charset='utf-8'>
		<title>下拉刷新</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link href="//cdn.bootcss.com/weui/0.3.0/style/weui.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
	</head>

	<body ontouchstart="">
		<!-- body 顶部加上如下代码 -->
		<div class="weui-pull-to-refresh-layer">
			<div class="pull-to-refresh-arrow"></div>
			<!-- 上下拉动的时候显示的箭头 -->
			<div class="pull-to-refresh-preloader"></div>
			<!-- 正在刷新的菊花 -->
			<div class="down">下拉刷新</div>
			<!-- 下拉过程显示的文案 -->
			<div class="up">释放刷新</div>
			<!-- 下拉超过50px显示的文案 -->
			<div class="refresh">正在刷新...</div>
			<!-- 正在刷新时显示的文案 -->
		</div>
		<div class="weui-infinite-scroll">
			<div class="infinite-preloader"></div>
			<!-- 菊花 -->
			正在加载中...
			<!-- 文案，可以自行修改 -->
		</div>
	</body>
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$(document.body).infinite();
			var loading = false; //状态标记
			$(document.body).infinite().on("infinite", function() {
				if (loading) return;
				loading = true;
				setTimeout(function() {
					$("#list").append("<p> 我是新加载的内容 </p>");
					loading = false;
				}, 1500); //模拟延迟
			});
			
			$(document.body).pullToRefresh();
			$(document.body).on("pull-to-refresh", function() {
				alert("下拉刷新");
				$(document.body).pullToRefreshDone();
			});
		});
	</script>

</html>